<template>
	<view>
		<uni-list>
			<uni-list-item v-for="item in lists" :key="item.id">
				<view slot="header" class="header-box">
					<view class="uni-thumb">
						<image :src="typeof item.avatar === 'string'?item.avatar : item.avatar[0]" mode="aspectFill"></image>
					</view>
				</view>
				<view slot="body" class="content">
					<view class="header">
						<view class="header-content">
							<view class="uni-title-sub">
								<text>作者姓名</text>
							</view>
							<view class="uni-note">这是作者的工作单位</view>
						</view>
						<text class="appreciate">71 赞</text>
					</view>
					<view class="comments-content">
						创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内组件创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内  组件
					</view>
					<view class="comments-footer">
						<text>09-21 12:30</text>
						<text class="reply-box" @click="open">12 回复</text>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		<uni-load-more v-if="lists.length > 0" :status="status" />
	</view>
</template>

<script>
	import db from '@/js_sdk/uni-clientDB/index.js';
	const dbCmd = db.command;
	export default {
		data() {
			return {
				lists: [],
				reload: false,
				status: 'more',
				tipShow: false,
				page: 1
			};
		},
		onLoad() {
			this.getList(this.page);
		},
		methods: {
			open(){
				uni.navigateTo({
					url:'/pages/comments-detail/comments-detail'
				})
			},
			onReachBottom() {
				this.reload = false;
				if (this.status === 'noMore') return
				this.page++
				this.getList();

			},
			getList() {
				this.status = 'loading'
				uniCloud.callFunction({
					name: 'uni-clientDB',
					data: {
						command: db.collection('opendb-news-article').where({
							_id: dbCmd.exists(true)
						}),
						pagination: {
							pageSize: 10,
							current: this.page
						}
					},
					success: res => {

						uni.stopPullDownRefresh();
						if (this.reload) {
							this.tipShow = true;
							clearTimeout(this.timer);
							this.timer = setTimeout(() => {
								this.tipShow = false;
							}, 2000);
						}
						let list = res.result.list;
						list = this.getRandomArrayElements(list, 10);
						this.lists = this.reload ? list : this.lists.concat(list);

						if (this.lists.length === res.result.total) {
							this.status = 'noMore'
						}
						this.reload = false;
					},
					fail(err) {
						console.error(err);
					}
				});
			},
			getRandomArrayElements(arr, count) {
				var shuffled = arr.slice(0),
					i = arr.length,
					min = i - count,
					temp,
					index;
				while (i-- > min) {
					index = Math.floor((i + 1) * Math.random());
					temp = shuffled[index];
					shuffled[index] = shuffled[i];
					shuffled[i] = temp;
				}
				return shuffled.slice(min);
			}
		}
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	
	
	.uni-thumb {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	.uni-note {
		margin-top: 5px;
	}
	.content {
		flex: 1;
	}
	.header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.header-content {
		flex: 1;
	}
	
	.appreciate {
		font-size: 14px;
		font-weight: 400;
		color: #666;
	}
	
	.comments-content {
		margin-top: 5px;
		font-size: 14px;
		color: #333;
		line-height: 1.5;
	}
	
	.comments-footer {
		font-size: 12px;
		color: #999;
		margin-top: 10px;
	}
	
	.reply-box {
		margin-left: 5px;
		padding: 2px 10px;
		background-color: #eee;
		border-radius: 20px;
		color: #666;
	}
	
	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
